<template>
  <div class="m-notice">
    <van-tabs v-model="active" color="#1F75F0" title-active-color="#1F75F0">
      <van-tab title="公告">
        <div class="m-notice-content">
          <div class="m-notice-list">
              <div class="m-notice-pd">
                <div class="m-notice-top">
                  <div class="m-notice-title">园区公告<span>置顶</span></div>
                  <div class="m-notice-time">2021年3月26日11:12:36</div>
                </div>
                <div class="m-notice-describe">
                  温馨提示：3号高层地下车库出口，5号高层地下车 库入口。地面多处破损，本周进行全面维修，请...
                </div>
                <div class="m-notice-bottom">
                  <div class="m-notice-more">查看详情</div>
                  <van-icon name="arrow" />
                </div>
              </div>
          </div>
          <div class="m-notice-list">
              <div class="m-notice-pd">
                <div class="m-notice-top">
                  <div class="m-notice-title">园区公告<span>置顶</span></div>
                  <div class="m-notice-time">2021年3月26日11:12:36</div>
                </div>
                <div class="m-notice-describe">
                  温馨提示：3号高层地下车库出口，5号高层地下车 库入口。地面多处破损，本周进行全面维修，请...
                </div>
                <div class="m-notice-bottom">
                  <div class="m-notice-more">查看详情</div>
                  <van-icon name="arrow" />
                </div>
              </div>
          </div>
          <div class="m-notice-list">
              <div class="m-notice-pd">
                <div class="m-notice-top">
                  <div class="m-notice-title">园区公告<span>置顶</span></div>
                  <div class="m-notice-time">2021年3月26日11:12:36</div>
                </div>
                <div class="m-notice-describe">
                  温馨提示：3号高层地下车库出口，5号高层地下车 库入口。地面多处破损，本周进行全面维修，请...
                </div>
                <div class="m-notice-bottom">
                  <div class="m-notice-more">查看详情</div>
                  <van-icon name="arrow" />
                </div>
              </div>
          </div>
          <div class="m-notice-list">
              <div class="m-notice-pd">
                <div class="m-notice-top">
                  <div class="m-notice-title">园区公告<span>置顶</span></div>
                  <div class="m-notice-time">2021年3月26日11:12:36</div>
                </div>
                <div class="m-notice-describe">
                  温馨提示：3号高层地下车库出口，5号高层地下车 库入口。地面多处破损，本周进行全面维修，请...
                </div>
                <div class="m-notice-bottom">
                  <div class="m-notice-more">查看详情</div>
                  <van-icon name="arrow" />
                </div>
              </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="通知">
        <div class="m-notice-content">
          <div class="m-notice-list">
              <div class="m-notice-pd">
                <div class="m-notice-top">
                  <div class="m-notice-title">园区公告<span>置顶</span></div>
                  <div class="m-notice-time">2021年3月26日11:12:36</div>
                </div>
                <div class="m-notice-describe">
                  温馨提示：3号高层地下车库出口，5号高层地下车 库入口。地面多处破损，本周进行全面维修，请...
                </div>
                <div class="m-notice-bottom">
                  <div class="m-notice-more">查看详情</div>
                  <van-icon name="arrow" />
                </div>
              </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

  export default {
    name: 'Notice',
    data() {
      return {
        active: 0
      }
    },
    created() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped="scoped">
  .m-notice-content{
    width: 750px;
    background: #F5F5F5;
    padding: 24px 0px 1px 0px;
    .m-notice-list {
      width: 690px;
      background: #FFFFFF;
      border-radius: 16px;
      margin: 0px 30px 24px 30px;
      .m-notice-pd {
        padding: 0px 36px;
        .m-notice-top {
          padding-top: 46px;
          display: flex;
          justify-content: space-between;
          .m-notice-title{
            font-size: 32px;
            font-weight: 500;
            color: #222222;
            display: flex;
            span {
              height: 30px;
              background: #FC5544;
              border-radius: 3px;
              color: #FFFFFF;
              font-size: 22px;
              padding: 3px 7px;
              margin-left: 16px;
              display: block;
              align-self: center;
            }
          }
          .m-notice-time {
            font-size: 26px;
            font-weight: 400;
            color: #999999;
            align-self: center;
          }
        }
        .m-notice-describe {
          font-size: 28px;
          font-weight: 400;
          color: #666666;
          padding-top: 32px;
          border-bottom: 1px solid #EDEDED;
          padding-bottom: 30px;
        }
        .m-notice-bottom {
          display: flex;
          justify-content: space-between;
          padding: 24px;
          .m-notice-more {
            font-size: 26px;
            font-weight: 400;
            color: #1F75F0;
          }
        }
      }
    }
  }
</style>
